<div class="topbar" id="topbar">
    <div class="fill">
        <div class="container">
            <a class="brand" href="#">eXtremcompta</a>
            <ul class="nav">
                <li class="active"><a href="<?php echo YANIS_ROOT; ?>">Accueil</a></li>
                <li><a href="#about">A propos</a></li>
            </ul>
            <ul class="nav secondary-nav" id="module-connexion">
                <li class="dropdown" data-dropdown="dropdown">
                    <a class="dropdown-toggle" href="#">
                        <em>Vous avez déjà un compte ?</em>
                        <strong>Se connecter</strong>
                    </a>
                    <fieldset id="signin_menu" class="menu-dropdown">
                        <form method="post" id="signin" action="https://twitter.com/sessions">
                            <input class="input-large" type="text" placeholder="Adresse e-mail">
                            <input class="input-large" type="password" placeholder="Mot de passe">
                            <p class="remember">
                                <button class="btn small" type="submit">Se connecter</button>
                                <input id="remember" name="remember_me" value="1" tabindex="7" type="checkbox">
                                <span>Se souvenir de moi</span>
                            </p>
                            <p class="forgot"> <a href="#">Mot de passe oublié?</a> </p>
                            <!--<p class="forgot-username"> <a title="Oubli..." href="#">Forgot your username?</a> </p>-->
                        </form>
                    </fieldset>
                </li>
            </ul>
        </div>
    </div>
</div> <!-- topbar -->

<div class="container">

    <!-- Such a marketing message :) -->
    <div class="hero-unit">
        <div>
            <h1>La compta sociale !</h1>
            <p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
        </div><!-- Xta Description -->
        <div class="front-signup floatblock1">
            <h3>Pas encore inscrit ? <span>S'inscrire !</span></h3>
            <form class="signup signup-btn" method="post" action="">
                <div class="clearfix">
                    <input class="span6" type="text" maxlength="20" name="name" value="" placeholder="Nom complet" autocomplete="off">
                </div>
                <div class="clearfix">
                    <input class="span6" type="text" name="email" value="" placeholder="Adresse e-mail" autocomplete="off">
                </div>
                <div class="clearfix">
                    <input class="span6" type="password" name="pwd" value="" placeholder="Mot de passe" autocomplete="off">
                </div>
                <!--<p><a class="btn primary large">Créer un compte &raquo;</a></p>-->
                <!--<input type="submit" value="S'inscrire">-->
                <button class="btn large primary" type="submit">S'inscrire</button>
            </form>
        </div><!-- Xta Subscription -->
        <div class="floatblock2"><p>OU</p></div>
        <div class="floatblock3">
            <p id="twitterconnect"><a href="#"><img src="resources/images/logo_twitter.png" alt="Twitter Connect Logo" width="161" height="30" /></a></p>
            <p id="facebookconnect"><a href="#"><img src="resources/images/logo_facebook.png" alt="Facebook Connect Logo" width="118" height="40" /></a></p>
            <p id="googleconnect"><a href="#"><img src="resources/images/logo_google.png" alt="Google Connect Logo" width="117" height="40" /></a></p>
        </div> <!-- Social Subscription -->
        <div class="clear"></div>
    </div> <!-- Hero Banner -->

    <div class="row" id="about">
        <div class="span6">
            <h2>titre 3</h2>
            <p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
            <p><a class="btn" href="#">Plus de détails &raquo;</a></p>

        </div>
        <div class="span5">
            <h2>titre 2</h2>
            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
            <p><a class="btn" href="#">Plus de détails &raquo;</a></p>
        </div>
        <div class="span5">

            <h2>titre 3</h2>
            <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            <p><a class="btn" href="#">Plus de détails &raquo;</a></p>
        </div>
    </div> <!-- Something About the App ! Ooh Yeah !-->

    <footer>
        <p>&copy; <a href="#" title="We Mobilize things ! SARL">WeMobz</a> 2011</p>
    </footer>

</div> <!-- /container -->

<script type="text/javascript">
    $(document).ready(function() {
        $(".dropdown-toggle").click(function(e) {
            e.preventDefault();
            $("fieldset#signin_menu").toggle();
            $(".dropdown-toggle").toggleClass("open");
        });

        $("fieldset#signin_menu").mouseup(function() {
            return false
        });
        $(document).mouseup(function(e) {
            if($(e.target).parent("a.dropdown-toggle").length==0) {
                $(".dropdown-toggle").removeClass("open");
                $("fieldset#signin_menu").hide();
            }
        });            
    });
</script>